<template>
    <div class="box">
        <div class="top">
            <Number :countArr="countArr"></Number>
        </div>
        <div id="main" style="width:100%;height:500px;"></div>
        <div id="main1" style="width:100%;height:500px;"></div>

    </div>
</template>
<script>
import Number from './components/NumberView.vue'
export default {
    components: { Number },
    data() {
        return {
            countArr:[
                {
                    num:0,
                },{
                    num:0,
                },{
                    num:0,
                },{
                    num:0,
                },
            ],
            start: 0,
            end: 50,
            doExamPaLperCount: 0,//总答卷数
            doQuestionCount: 0,//总题数
            examPaperCount: 0,//试卷总数
            mothDayText: 0,//总天数
            mothDayUserActionValue: 0,//活跃度
            questionCount: 0,//题目总数
        }
    },
    methods: {
        change(data, dataVal) {
            const chartBox = this.$echarts.init(document.getElementById("main"));
            const option = {
                title: {
                    text: '用户活跃度',
                    left: "center",
                    textStyle: {
                        color: '#42A8F7',
                        fontWeight: 'normal',
                    }
                },
                xAxis: {
                    data,
                    // nameGap: '-20',
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#EEFAFA',
                            width: 0,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#56D3D5'
                        }
                    },
                },
                yAxis: {
                    type: 'value',

                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#56D3D5'
                        }
                    }
                },
                series: [
                    {
                        type: "line",
                        data: dataVal,
                        smooth: 'true',
                        itemStyle: {
                            color: '#44CDCF'
                        }
                    },
                ],
            };
            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                chartBox.resize();
            });
        },
        change1(data, dataVal) {
            const chartBox = this.$echarts.init(document.getElementById("main1"));
            const option = {
                title: {
                    text: '题目数量活跃度',
                    left: "center",
                    textStyle: {
                        color: '#42A8F7',
                        fontWeight: 'normal',
                    }
                },
                xAxis: {
                    data,
                    // nameGap: '-20',
                    type: 'category',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#EEFAFA',
                            width: 0,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#56D3D5'
                        }
                    },
                },
                yAxis: {
                    type: 'value',

                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#56D3D5'
                        }
                    }
                },
                series: [
                    {
                        type: "line",
                        data: dataVal,
                        smooth: 'true',
                        itemStyle: {
                            color: '#44CDCF'
                        }
                    },
                ],
            };
            chartBox.setOption(option);
            // 根据页面大小自动响应图表大小
            window.addEventListener("resize", function () {
                chartBox.resize();
            });
        }
    },
    mounted() {
        
    },
    beforeCreate(){
        this.axios({
            url: '/api/admin/dashboard/index',
            method: 'post',
        }).then(res => {
            console.log(res.data.response);
            this.countArr[0].num = res.data.response.examPaperCount;
            this.countArr[1].num = res.data.response.questionCount;
            this.countArr[2].num = res.data.response.doExamPaLperCount;
            this.countArr[3].num = res.data.response.doQuestionCount;
            this.change(res.data.response.mothDayText, res.data.response.mothDayUserActionValue);
            this.change1(res.data.response.mothDayText, res.data.response.mothDayDoExamQuestionValue);
        })
    },

}

</script>
<style></style>
